<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/tentime"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <style type="text/css">
    	:focus {outline: -webkit-focus-ring-color auto 0px !important;}
	    .layui-col-lg1 { width: 80px!important;}
		.layui-table-view {margin: 0px 0px !important;}
		.layui-form-item {margin-bottom: 0px!important;}
		.layui-form-label {padding: 5px 0px!important; width: 60px!important; text-align: left!important;}
		.tree-title { padding: 5px; line-height: 20px; text-align: center;  background-color: #fafafa;}
		.layui-bg-red {background-color: #FF5722!important;}
    </style>
</head>
<body style="overflow-y: hidden;">
<div class="ui-layout-west">
	<div class="layui-row">
    	<div class="tree-title">组织机构</div>
		<div id="myTree"></div>
	 </div>
</div>
<div class="ui-layout-center">
    <div class="layui-col-md12"><div class="layui-card">
		<form class="layui-form" action="" id="search_form">
        	<div class="layui-card-body"><div class="layui-form-item">
                   	
                   	<div class="layui-inline">
                 		<label class="layui-form-label">用户名</label>
                 		<div class="layui-input-inline">
                        	<input type="text" name="username" id="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                   	<div class="layui-inline">
                 		<label class="layui-form-label">姓名</label>
                 		<div class="layui-input-inline">
                        	<input type="text" name="nickname" id="nickname" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                   	<div class="layui-inline">
                 		<label class="layui-form-label">部门</label>
                 		<div class="layui-input-inline">
                        	<input class="layui-input select-tree" th:attr="data-url=@{/system/dept/list}, data-value=${dept?.id}" 
                        		th:value="${dept?.title}" type="text" name="dept_id" placeholder="请选择部门">
                        </div>
                    </div>
                   	<div class="layui-inline more-container" style="display: none">
                 		<label class="layui-form-label">角色</label>
                 		<div class="layui-input-inline">
                        	<input type="text" name="rolenames" id="rolenames" placeholder="请输入角色" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                   	<div class="layui-inline more-container" style="display: none">
                    	<label class="layui-form-label">状态</label>
                    	<div class="layui-input-inline">
                    		 <select class="tentime-search-select" name="status" mo:dict="SEARCH_STATUS" mo-selected="${param.status}" mo-empty="全部"></select>
                        </div>
                    </div>
                   	<div class="layui-inline">
                        <button class="layui-btn layui-btn-primary layui-btn-sm" lay-submit="" lay-filter="search"><i class="layui-icon layui-icon-search"></i>查询</button>
                        <button class="layui-btn layui-btn-primary layui-btn-sm" id="reset" lay-filter="reset"><i class="layui-icon layui-icon-refresh"></i>重置</button>
                        <button class="layui-btn layui-btn-primary layui-btn-sm more-btn" type="button" onclick="more_click('myTable');"><i class="layui-icon layui-icon-addition"></i>展开</button>
                    </div>
                   
			</div></div>
		</form>
	<table id="myTable" lay-filter="myTable"></table>
	</div></div>
</div>

<script type="text/html" id="toolbarGrid">
	<div class="layui-btn-container"><!--layui-btn-group-->
        <a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="add" shiro:hasPermission="system:user:add"><i class="layui-icon">&#xe654;</i>新增</a>
        <a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="del" shiro:hasPermission="system:user:status"><i class="layui-icon">&#xe640;</i>删除</a>
		<a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="resetPass" shiro:hasPermission="system:user:pwd"><i class="layui-icon">&#xe683;</i>重置密码</a>		
        <a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="refresh"><i class="layui-icon">&#xe666;</i>刷新</a>
 	</div>		
</script>
<script type="text/html" id="toolbarCell">
	<div class="layui-btn-container">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit" shiro:hasPermission="system:user:edit"><i class="layui-icon">&#xe642;</i>修改</a>
        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="detail" shiro:hasPermission="system:user:detail"><i class="layui-icon">&#xe714;</i>详情</a>
		<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="more" shiro:hasPermission="system:user:status">更多 <i class="layui-icon layui-icon-down"></i></a>
    </div>
</script>	
<script type="text/html" id="transSex">
    {{# if (d.sex==1) { }}
 		<span>男</span>
	{{# } else if(d.sex==2) { }}  
		<span>女</span>
	{{# }}}  
</script>
<script type="text/html" id="transStatus">
    {{# if (d.status==1) { }}
 		<span>正常</span>
	{{# } else if(d.status==2) { }}
		<span>冻结</span>
	{{# } else if(d.status==3) { }}
		<span>删除</span>
	{{# }}}
</script>

<script th:replace="/common/template :: common"></script>
<script th:src="@{/lib/jquery_layout/jquery-ui-1.9.2.js}"></script>
<script th:src="@{/lib/jquery_layout/jquery.layout-v1.4.4.js}"></script>
<script type="text/javascript" th:src="@{/lib/zTree_v3/js/jquery.ztree.core.min.js}"></script>
<script type="text/javascript" th:src="@{/js/tentimeTree.js}"></script>
<link rel="stylesheet" th:href="@{/lib/zTree_v3/css/zTreeStyle/zTreeStyle.css}" type="text/css">
<link rel="stylesheet" th:href="@{/lib/jquery_layout/jquery.layout-v1.4.4.css}">
<script th:inline="javascript">
	//$('#container').layout();
    layui.use(['form', 'soulTable', 'table', 'laydate','tree', 'util', 'dropdown'], function () {
    	// 布局
		var layout = $("body").layout();
		layout.sizePane("west", 180);
		
		var form = layui.form, table = layui.table, laydate = layui.laydate
		, soulTable = layui.soulTable,tree = layui.tree,util = layui.util, dropdown = layui.dropdown;
		var title = '用户管理', winWidth = 750, winHeight = 530;
		var url = ctx + '/system/user/';
		// 树状结构
		tree.render({
	        elem: '#myTree',
	        data: getData(),
	        id: 'treeId',
	        showCheckbox: false,     //是否显示复选框
	        onlyIconControl: true
	        ,click: function(obj) {
	            var data = obj.data;  //获取当前点击的节点数据:colse | open
	        	var options = {url: url + 'getList?dept_id=' + data.id};
	        	myTable.reload(options);// 点击表格重载
	         }
	    });
		function getData() { // 获取数据表格
		    var data = [];
		    $.ajax({
		        url: ctx + "/system/dept/getTreeData",    //后台数据请求地址
		        type: "post",
		        async:false,
		        success: function(resut) {
		            data = resut;
		        }
		    });
		    return data;
		}
        /* 渲染主表格*/
        var myTable = table.render({
            id: 'myTable'
            ,elem: '#myTable'
            ,url: url + 'getList'
            ,method: 'post'
            ,contentType: 'application/json'
            ,height: $(document).height() - $('#myTable').offset().top //'full-50'// 
            ,defaultToolbar: ['filter', 'print', 'exports']
        	,toolbar: '#toolbarGrid' //'default',    
            //,sort: 'user_no'
            ,page: true
            ,limits: [20, 30, 50, 100, 200]
            ,limit: 20 //默认采用20
            ,cols: [
                [
                {type: 'numbers', title: '序号', fixed: 'left'}
            	,{type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', hide: true}
                ,{field: 'tenant', title: '租户', hide: true}
                ,{field: 'username', title: '用户名', fixed: 'left',sort: true, filter: true, width: 100}
				,{field: 'nickname', title: '姓名' ,sort: true, filter: true, width: 100}
				,{field: 'title', title: '部门' ,sort: true, filter: true, width: 120}
				,{field: 'rolenames', title: '角色' ,sort: true, filter: true, width: 200}
				,{field: 'sex', title: '性别',sort: true, filter: true, templet:'#transSex', width: 80}
				,{field: 'phone', title: '联系方式' ,sort: true, filter: true, width: 150}
				,{field: 'email', title: '电子邮箱' ,sort: true, filter: true, width: 160}
				,{field: 'status', title: '状态',sort: true, filter: true, templet:'#transStatus', width: 80}
				,{field: 'create_date', title: '创建时间',sort: true, width: 120, templet : "<div>{{layui.util.toDateString(d.create_date, 'yyyy-MM-dd')}}</div>"}
				,{field: 'remark', title: '备注' ,sort: true, filter: true, width: 250}
                ,{title: '操作', templet: '#toolbarCell',fixed: 'right',width:220}
				]
            ]
			,rowDrag: {/*trigger: 'row',*/ done: function(obj) {
					// 完成时（松开时）触发,如果拖动前和拖动后无变化，则不会触发此方法
					/*
					console.log(obj.row) // 当前行数据
					console.log(obj.cache) // 改动后全表数据
					console.log(obj.oldIndex) // 原来的数据索引
					console.log(obj.newIndex) // 改动后数据索引
					 */
				}}
			, filter: {
				//用于控制表头下拉显示，可以控制顺序、显示, 依次是：表格列、筛选数据、筛选条件、编辑筛选条件、导出excel,其中page=true时data过滤有问题
				//items:['column','data','condition','editCondition','excel'] //用于控制表头下拉显示，可以控制顺序、显示
				items:['column','condition','excel'] //用于控制表头下拉显示，可以控制顺序、显示
				,bottom: false //隐藏工具栏帅选条件
			}
            , done: function (res, curr, count) {
                // 如果有使用到下拉筛选，这句话必须要
                soulTable.render(this);
            }
        });
		form.on('submit(search)', function (data) {
			var url_s = url + 'getList';
			search(data, myTable, url_s);
			return false;
		});
		// 顶部工具栏监听  头工具栏事件toolbar  监听行工具事件 tool
	    table.on('toolbar(myTable)', function (obj) {
	    	var checkStatus = table.checkStatus(obj.config.id) ,datas = checkStatus.data; //获取选中的数据
	       	var len = checkStatus.data.length;
	        if (obj.event === 'add') {//增加父级
	        	var url_add = url + 'userForm';
	        	openWin(title, url_add, winWidth, winHeight);
	        } else if (obj.event === 'refresh') {
	        	myTable.reload(); //这个方法刷新后，展开/收缩不起作用
	        } else if (obj.event === 'resetPass') {//重置密码
	        	if (len == 0) {
	        		layer.msg('请选择数据！', {icon: 2});
	        	} else {
	        		layer.confirm('确定要对选中的数据重置密码吗？', function (index) {
	        			var ids = [];
	        			$.each(datas,function(idx,obj) {
	        				ids.push(obj.id);
	        			});
	        			var url_reset = url + 'resetPassForm?ids=' + ids.toString();
	    	        	openWin("重置密码", url_reset, 450, 250);
	    	        	layer.close(index);
		            });
	        	}
	        } else if (obj.event === 'del') {
	        	if (len == 0) {
	        		layer.msg('请选择数据！', {icon: 2});
	        	} else {
	        		layer.confirm('确定要删除吗？', function (index) {
	        			var ids = [];
	        			$.each(datas,function(idx,obj) {
	        				ids.push(obj.id);
	        			});
		                $.ajax({
		                    type: 'post',
		                    url: url + 'deleteEntity',
		                    async: false,
		                    data: {'ids': ids.toString(), 'param': 'delete'},
		                    success: function (data) {
		                    	var code = data.code;
		    	            	var msg = data.msg;
		    	            	if (code == 200) {
		    	            		layer.msg('操作成功：' + msg, {icon: 1, time: 1000});
			                    	myTable.reload();
		    	            	} else {
		    	            		layer.msg('操作失败：' + msg, {icon: 2});
		    	            	}
		                    }
		                });
		                layer.close(index);
		            });
	        	}
	        }
	    });
        // 修改和删除
        table.on('tool(myTable)', function(obj) {
        	var that = this;
            var data = obj.data; // 获得当前行数据
            var id = data.id;
            if (obj.event === 'detail') {//详情
            	var url_detail = url + 'detail/' + id;
	        	openWin(title, url_detail, winWidth, winHeight);
            } else if (obj.event === 'edit') {//修改
            	var url_edit = url + 'userForm?id=' + id;
	        	openWin(title, url_edit, winWidth, winHeight);
            } else if(obj.event === 'more') { //更多下拉菜单
	    	      dropdown.render({
		    	        elem: that
		    	        ,show: true //外部事件触发即显示
		    	        ,data: [{title: '冻结' ,id: 'frozen'},{type: '-'},{title: '启用' ,id: 'use'}]
		    	        ,click: function(data, othis) {
		    	         	//根据 id 做出不同操作
		    	         	var title_status = (data.id === 'frozen') ? '确定要冻结数据吗？' : '确定要启用数据吗？';
		    	         	if(data.id === 'frozen' || data.id === 'use') {// 冻结
		    	            	layer.confirm(title_status, function(index) {
		    	            		var params = {ids: id, param : (data.id === 'frozen') ? 'freezed' : 'ok'};
		    		                $.ajax({
		    		                    type: 'post',
		    		                    url: url + 'deleteEntity',
		    		                    async: false,
		    		                    data: params,
		    		                    success: function (data) {
		    		                    	var code = data.code;
		    		    	            	var msg = data.msg;
		    		    	            	if (code == 200) {
		    		    	            		layer.msg('操作成功：' + msg, {icon: 1, time: 1000});
		    			                    	myTable.reload();
		    		    	            	} else {
		    		    	            		layer.msg('操作失败：' + msg, {icon: 2});
		    		    	            	}
		    		                    }
		    		                });
		    	              		layer.close(index);
		    	            	});
		    	          	}
		    	        }
		    	      }); 
		    	  }
        });
      //监听行单击事件row(test)（双击事件为：rowDouble）
	    table.on('rowDouble(myTable)', function(obj){
	    	var data = obj.data;
	    	var url_update = url + 'userForm?id=' + data.id;
        	openWin(title, url_update, winWidth, winHeight);
	    });
        // 获取选中数据
        /*
        $('[data-type=getCheckData]').on('click', function () {
            var checkStatus = table.checkStatus('myTable')
                ,data = checkStatus.data; //选中行数据
            layer.alert(JSON.stringify(data), {title: '勾选数量: '+checkStatus.data.length} );
            return false;
        });
		*/
	    var local = window.localStorage;
	    // 部门树形菜单
	    $.fn.selectTree({
	        rootTree: '全部',
	        onSelected: function (treeNode) {
	            local.setItem('deptTitle', treeNode.name);
	        }
	    });
		// 选中颜色背景
		table.on('checkbox(myTable)', function (obj) {
			selectRow('myTable', obj);
		});
	 	// 保存或更新后供子页面调用
	    window.reloadTable = function() {
	    	myTable.reload();
     	};
    });
</script>
</body>
</html>